<template>
	<view class="order">
			<!-- 胶囊 -->
			<navNav :navobj="navobj"></navNav>
			<view style="margin-left: 40rpx;">
				<view class="user">
					<view class="user-left">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<view class="user-left-right">
							<view class="title">张先生</view>
							<view class="des">发单次数：5</view>
						</view>
					</view>
					<view class="user-right">
						<view class="ykj"> <text style="font-size: 24rpx;color: #3d3d3d;margin-top: 4rpx;">一口价
						</text><text style="font-size: 20rpx;color: #FA5151 ;margin-top: 4rpx;">￥</text>70.00</view>
					</view>
				</view>
				<view class="yq">已有师傅抢单</view>
				<view class="list">
					<text>订单编号：1231123123123</text>
					<text>服务内容：拆开沙发拆开沙发</text>
					<text>发布时间：2023年-4-15 15:00</text>
				</view>
				<view class="server">服务备注</view>
				<image class="images" src="../../static/logo.png" mode="aspectFill"></image>
				<view class="texts">沙发内部有油渍，需要着重清理</view>
				<view class="server">抢单师傅</view>
				<view class="peoplelist" >
					<view class="people" v-for="(item,index) in 3" :key="index">
						<image src="../../static/logo.png" mode="aspectFill"></image>
						<text class="name">王师傅</text>
						<text class="des">接受一口价</text>
					</view>
				</view>
			</view>
		 
	</view>
</template>

<script>
	import {reactive, ref,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	const {proxy} = getCurrentInstance()
	const navobj = reactive({
		title:'订单详情',
		image:true
	})
	const id = ref('')
	const detail = ref({})
	onLoad((options)=>{
		id.value=options.id
		// contentdetailfun()
	})
	//列表请求
	const contentdetailfun=async()=>{
		var data = {requestId:id.value}
		const result = await proxy.$api.contentdetailAPi(data)
		if(result.code==200){
			console.log('服务订单详情',result.data);
			detail.value = result.data

		}
	}		
		

</script>

<style lang="scss" >

	.user{
		width: 670rpx;display: flex;align-items: center;height: 100rpx;justify-content: space-between;
		margin-top: 40rpx;
		.user-left{
			display: flex;align-items: center;
			image{
				width: 100rpx;height: 100rpx;border-radius: 100%;
			}
			.user-left-right{
				height: 100rpx; display: flex;flex-direction: column;justify-content: space-around;margin-left: 20rpx;
				.title{
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 700;
					font-size: 28rpx;
					color: #3D3D3D;
				}
				.des{
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 24rpx;
					color: rgba(0,0,0,0.4);
				}
			}
		}
		.user-right{
				height: 100rpx; display: flex;flex-direction: column;justify-content: center;
				.ykj{
					display: flex;align-items:center;font-size: 36rpx;font-weight: 700rpx;color:#FA5151 ;
				}
		}
	}
	.yq{
		font-family: Source Han Sans, Source Han Sans;margin-top: 20rpx;
		font-weight: 700;font-size: 28rpx;color: #3662EC;
	}
	.list{
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;margin-top: 60rpx;
		font-size: 28rpx;
		color: rgba(0,0,0,0.85);
		text{
			margin-top: 10rpx;
		}
	}
	.server{
		margin-top: 40rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		font-size: 28rpx;
		color: #3D3D3D;
	}
	.images{
		width: 160rpx;height: 160rpx;margin-top: 20rpx;
	}
	.texts{
		width: 670rpx;background: #F9F9F9;border-radius:10rpx;margin-top: 20rpx;
		padding: 40rpx 0;box-sizing: border-box;text-align: center;
		
	}
	.peoplelist{
		display: flex;align-items: center;flex-wrap: wrap;margin-top: 20rpx;width: 670rpx;
		.people{
			display: flex;align-items: center;flex-direction: column;margin-right: 40rpx;
			image{
				width: 100rpx;height: 100rpx;border-radius: 100%;
			}
			.name{
				font-size: 28rpx;color: #3d3d3d;margin-top: 10rpx;
			}
			.des{
				font-size: 20rpx;color: #3662EC;margin-top: 4rpx;
			}
		}
	}
</style>
